<template>
    <div class="createNewCourseBox">
        <!-- logo -->
        <div class="newCourse-logo"><img src="../../static/image/icon-title.png" alt=""></div>
        <!-- logo end-->

        <!-- header -->
        <adminHeader></adminHeader>
        <!-- header end-->
        
        <!-- contentBox-->
        <div class="newCourseContent">
            <!-- 创建课程noe -->
            <div class="creatCourseBox" v-if="courseContentShow == 'creatCourseOne'" >
                <div class="public-header">
                    <div class="public-header-ch">创建课程</div> 
                    <div class="public-header-en">CREAT COURSE</div> 
                    <div class="public-header-line"></div>
                </div>

                <!-- firstContent -->
                <div class="courseOneBox" >
                    <!-- titleLine -->
                    <div class="titleLine">
                        <div class="left">
                            <div class="bgLeft">1</div>
                            <p class="purple">创建课程</p>
                            <!-- <img src="../../static/image/" alt=""> -->
                        </div>
                        <div class="middle">
                            <div></div>
                        </div>
                        <div class="left">
                            <div class="bgRight">2</div>
                            <p>加入学员</p>
                        </div>
                    </div>
                    <!-- titleLine end-->

                    <!-- content -->
                    <div class="oneContent clear">
                        <!-- 表单 -->
                        <div class="oneContent_left">
                            <div>
                                <label> <i class="red">*</i>课程名称</label>
                                <el-input v-model="createCourseData.courseName" @blur="validateData('courseName')" placeholder="请输入课程名称"></el-input>
                                <div class="emptyTip" v-show="courseNameErr">课程名称不得为空</div>

                            </div>
                            <div>
                                <label> <i class="red">*</i>允许学员提前进入的时间（0.5小时-168小时）</label>
                                <el-input v-model.number="createCourseData.earlyEnterTime" @blur="validateData('earlyEnterTime')" placeholder="请选择提前进入的时间"></el-input>
                                <div class="emptyTip" v-show="enterTimeErr">进入时间不得为空</div>
                                <div class="emptyTip" v-show="enterTimeErr1">请输入数值！</div>
                                <div class="emptyTip" v-show="enterTimeTextErr">时间范围在0.5小时-168小时之间</div>
                            </div>
                            <div>
                                <label> <i class="red">*</i>课程开始时间</label>
                                <div class="timeLine">
                                    <el-date-picker v-model="createCourseData.sDate" type="date" placeholder="请选择日期" @blur="validateData('startDate')" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
                                   
                                    <el-time-picker 
                                        style="border:none;" arrow-contro v-model="createCourseData.sTime" value-format="HH:mm" format="HH:mm"
                                        placeholder="请选择时间" @blur="validateData('startTime')">
                                    </el-time-picker>
                                     
                                </div>
                                <div class="emptyBox">
                                    <div class="emptyTip" v-show="startDateErr">开始时间不得为空</div>
                                    <div class="emptyTip" v-show="startTimeErr">日期不得为空</div>
                                    
                                </div>
                                
                            </div>
                            <div>
                                <label> <i class="red">*</i>课程结束时间</label>
                                <div class="timeLine">
                                    <el-date-picker v-model="createCourseData.eDate" type="date" placeholder="请选择日期" @blur="validateData('endDate')" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
                                    <el-time-picker 
                                        style="border:none;" arrow-contro v-model="createCourseData.eTime" value-format="HH:mm" format="HH:mm"
                                        placeholder="任意时间" @blur="validateData('endTime')">
                                    </el-time-picker>
                                </div>
                                <div class="emptyBox">
                                    <div class="emptyTip" v-show="endDateErr">开始时间不得为空</div>
                                    <div class="emptyTip" v-show="endTimeErr">日期不得为空</div>
                                    <div class="emptyTip" v-show="endTimeHaErr">结束时间不能小于开始时间</div>
                                </div>
                            </div>
                            <div>
                                <label> <i class="red">*</i>轮数</label><br/>
                                <select v-model="createCourseData.roundsNumber" class="roundsSelect" @blur="validateData('roundsNumber')" >
                                    <option v-for="(list,index) in options " :value="list.value" :key="index" >{{list.value}}</option>
                                </select>
                                
                                <div class="emptyTip" v-show="roundsNumberErr">轮数不得为空</div>
                            </div>
                            

                        </div>
                        <div class="oneContent_left">
                            <div>
                                <el-checkbox label="自动运行 时间间隔" name="type" :checked="runningshow" @change="runningshow=!runningshow" ></el-checkbox>
                                <el-input v-model="createCourseData.autoRunTime" :disabled="!runningshow" @blur="validateData('autoRunTime')"></el-input>
                                <div class="emptyTip" v-show="autoRunTimeErr">时间不得为空</div>
                            </div>
                            <!-- -->
                            <div class="roundsBox" v-if="runningshow">
                                <div v-for="(list,index) in tmpRoundNum" :key="index">
                                    <label><i class="red">*</i>第{{index+1}}轮</label>
                                    <div class="timeLine">
                                        <el-date-picker v-model="list.startDate" type="date" placeholder="选择日期" @blur="validateData('')" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
                                        <!-- <el-time-picker 
                                            style="border:none;" arrow-contro v-model="list.startTime" value-format="HH:mm" format="HH:mm"
                                            placeholder="任意时间" @blur="validateData('')">
                                        </el-time-picker> -->
                                        <el-time-picker 
                                            style="border:none;" arrow-contro v-model="list.startTime" value-format="HH:mm" format="HH:mm"
                                            placeholder="任意时间" @blur="firstHandler(index)">
                                        </el-time-picker>
                                    </div>
                                    <div class="emptyBox">
                                        <div class="emptyTip" v-show="firstDateErr">日期不得为空</div>
                                        <div class="emptyTip" v-show="firstTimeErr">时间不得为空</div>
                                        <div class="emptyTip" v-show="endTimeHaErr">结束时间不能小于开始时间</div>
                                    </div>
                                </div>
                            </div>
                            <!-- end-->
                            <!-- <div>
                                <el-checkbox label="需要小级视频会议室" name="type"></el-checkbox>
                                
                            </div> -->
                            <div>
                                <el-checkbox label="讲师名称" name="type" :checked="isNeedLecturer" @change="isNeedLecturer=!isNeedLecturer"></el-checkbox>
                                <el-input v-model="createCourseData.lecturer"></el-input>
                            </div>
                        </div>
                        <!-- 表单 end-->
                        
                    </div>
                    <!-- content end-->
                    <!-- <p class="tip">注：创建课程时间需晚于系统时间1小时</p> -->
                    <el-button :disabled="hasError" class="nextStep" @click="businessSimulationNex()">下一步</el-button>
                </div>
                <!-- firstContent end-->
            </div>
            <!-- 创建课程noe end-->

            <!-- 创建课程two -->
            <div class="creatCourseBox" v-if="courseContentShow == 'creatCourseTwo'">
                <div class="public-header">
                    <div class="public-header-ch">创建课程</div> 
                    <div class="public-header-en">CREATE COURSE</div> 
                    <div class="public-header-line"></div>
                </div>
                <div class="titleLine">
                    <div class="left">
                        <div class="bgLeft">√</div> 
                        <p >创建课程</p>
                    </div> 
                    <div class="middle">
                        <div></div>
                    </div> 
                    <div class="left">
                        <div class="bgLeft">2</div> 
                        <p class="purple">加入学员</p>
                    </div>
                    <!-- tip -->
                    <el-tooltip 
                        class="item" effect="dark" 
                        content="创建队伍最少需填写4组，最多6组，请根据您的需求填写信息,未填写的输入框不会读取信息。" 
                        placement="right">
                        <img src="../../static/image/tipIcon.png" alt="" class="tipIcon"> 
                    </el-tooltip> 
                    <!-- tip end-->
                </div>
                <!-- courseTwoBox -->
                <div class="courseTwoBox">
                    <!-- 批量导入 -->
                    <div class="bulkImport" @click="dialogVisible = true">
                        <img src="../../static/image/pl.png" alt="">
                        <span>批量导入学员账号</span>
                    </div>
                    <!-- 批量导入 end-->
                    <!-- 队伍 -->
                    <div class="teamBox clear">
                        <div class="teamContent" v-for="(list,index) in contentData" :key="index">
                            <div class="team-title">
                                <div class="teamName">{{list.teamName}}</div>
                                <div class="addTeam">
                                    <img src="../../static/image/icon-add.png" alt="">
                                    <span @click="addStudents(index)">添加已有学员</span>
                                </div>
                            </div>
                            <table>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>姓名</th>
                                        <th>手机号</th>
                                        <th>性别</th>
                                        <th>子公司/部门</th>
                                        <th>职位</th>
                                    </tr>
                                    
                                </thead>
                                <tbody>
                                    <tr v-for="item in list.requestTeamMembers" :key="item.id">
                                        <td>{{item.studentNum}}</td>
                                        <td><input type="text" v-model="item.name"></td>
                                        <td>
                                            <input type="text" v-model="item.mobile" 
                                                   @change="blurValidator(item.mobile,contentData,$event)" 
                                                  >
                                            <div class="emptyTip2"></div>
                                            <!-- <div class="emptyTip" v-show="phoneFormatErr">手机号码格式错误</div> -->
                                            <!-- <div class="emptyTip" v-show="phoneRepeatErr">手机号码重复</div> -->
                                        </td>
                                        <td>
                                            <select v-model="item.gender"  placeholder="男">
                                                <option label="男" value="男"></option>
                                                <option label="女" value="女"></option>
                                            </select>
                                        </td>
                                        <td><input type="text" v-model="item.department"></td>
                                        <td>
                                            <select v-model="item.position" >
                                                <option :value="option.id" v-for="option in getPositionAll" :key="option.id" >{{option.positionName}}</option>
                                            </select>
                                            <!-- <input type="text" v-model="item.position"> -->

                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <!-- 队伍 end-->
                    <!-- <div class="teamBtn">
                        <button @click="createManually()">上一步</button>
                        <button @click="creatCourse()">创建课程</button>
                    </div> -->
                    <!-- tip-->
                    <div class="creatTipBox" v-show="creatTipBox">
                        <div class="left">
                            <span>已填写<b class="darkPurple left-number">{{existsStudents}}</b>组学员</span>
                            <span>合计<b class="darkPurple left-number">{{countStudents}}</b>人</span>
                        </div>
                        <div class="middle ">
                            <button @click="createManually()">上一步</button>
                            <button @click="creatCourse()">创建课程</button>
                        </div>
                        <div class="right red">
                            <i>*</i>
                            <span>创建课程时最少需填写4组</span>
                        </div>
                    </div>
                    <!-- tip end-->                    
                </div>
                <!-- courseTwoBox end-->
                <!-- 批量导入学员账号 dialog -->
                <el-dialog
                    title=""
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose" class="batchImportDialog">
                    <div class="uploadContent">
                        <div class="uploadTitle">
                            <h3>批量导入学员账号</h3>
                            <div></div>
                        </div>
                        <div class="uploadLine">
                            <h4><i class="red">*</i>导入学员账号</h4>
                            <div class="file">
                                <span class="upload-word">上传文件</span>
                                <el-upload
                                    class="upload-demo"
                                    action="/api/admin/courseMemberExcel"
                                    :on-success="handleSuccess"
                                    :before-upload="beforeAvatarUpload"
                                    :show-file-list = "true"
                                >
                                    <el-button size="small" type="primary">
                                        <img class="upload" src="../../static/image/shangchuan.png" alt="">
                                        <span class="upword">上传</span>
                                    </el-button>
                                </el-upload>
                            </div>
                            <div class="dialogErr" v-show="dialogErr">
                                <img src="../../static/image/failure.png" alt="">
                                <span>上传文件只能是 xls、xlsx格式!</span>
                            </div>
                            <div class="promptContent">
                                <p>请依照下列指示操作：</p>
                                <p>1.点击 <a href="http://p92g708lv.bkt.clouddn.com/%E5%88%9B%E5%BB%BA%E8%AF%BE%E7%A8%8B%E5%AD%A6%E5%91%98%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF1.1.2.xlsx">下载批量导入模版</a>
                                </p> 
                                <p>2. 编辑批量导入模版</p> 
                                <p>3. 上传编辑过后的批量导入模板</p>
                            </div>
                        </div>                       
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                        <el-button type="primary" 
                                   @click="importCreatCourse()"
                                   :disabled="importHasError"
                        >创建课程</el-button>
                    </span>
                </el-dialog>
                <!-- 批量导入学员账号 dialog end-->  
                <!-- 创建成功 dialog -->
                <el-dialog
                    title=""
                    :visible.sync="successModal"
                    width="30%"
                    :before-close="handleClose" class="successModalBox">
                    <div class="scuccessContent">
                        <h3>创建成功</h3>
                        <div>课程名称：{{createCourseData.courseName}}</div>
                        <div>课程开始时间：{{createCourseData.startTime}}</div>
                        <div>课程结束时间：{{createCourseData.endTime}}</div>
                        <div>
                            <span>轮数：{{createCourseData.roundsNumber}}</span>
                            <!-- <span>组数：4</span> -->
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                        <el-button type="primary" @click="confirmDia()" >确 定</el-button>
                    </span>
                </el-dialog>
                <!-- 创建成功 dialog end-->
            </div>
            <!-- 创建课程two end-->

            
        </div>
        <!-- contentBox end-->

        <!-- 导入modal -->
        <div class="importModalBox" v-if="importModal">
            <!-- content -->
            <div class="modalContent">
                <div class="modalTitle">
                    <h3>目前导入学员名单</h3>
                    <div></div>
                </div>
                <!-- 队伍 -->
                <div class="teamBox1 clear">
                    <div class="teamContent1" v-for="list in modalContentData" :key="list.id">
                        <div class="team-title1">
                            <div class="teamName1">{{list.teamName}}</div>
                            <!-- <div class="addTeam1">
                                <img src="../../static/image/icon-add.png" alt="">
                                <span>添加已有学员</span>
                            </div> -->
                        </div>
                        <table>
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>姓名</th>
                                    <th>手机号</th>
                                    <th>性别</th>
                                    <th>子公司/部门</th>
                                    <th>职位</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in list.requestTeamMembers" :key="item.id">
                                    <td><span>NEW</span>学员{{index+1}}</td>
                                    <td><input type="text" v-model="item.name"></td>
                                    <td>
                                        <input type="text" v-model="item.mobile" @change="blurValidator(item.mobile,modalContentData,$event)" 
                                                  >
                                            <div class="emptyTip3"></div>
                                    </td>
                                    <td>
                                        <select v-model="item.gender"  placeholder="男">
                                            <option label="男" value="男"></option>
                                            <option label="女" value="女"></option>
                                        </select>
                                    </td>
                                    <td><input type="text" v-model="item.department"></td>
                                    <!-- <td><input type="text" v-model="item.position"></td> -->
                                    <td>
                                        <select v-model="item.position">
                                            <option :value="option.id" v-for="option in getPositionAll" :key="option.id" >{{option.positionName}}</option>
                                        </select>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <!-- 队伍 end-->
                <div class="teamBtn1">
                    <button @click="importCreatStep()">上一步</button>
                    <button @click="importCreatSuccess()">创建课程</button>
                </div>
            </div>
            <!-- content end-->

        </div>             
        <!-- 导入modal end-->    

        <!-- 添加已有学员 -->
        <addStudents :max-length="this.currentTeamEmptyArr.length"  v-show="studentsAll" v-on:listenerAddStudent="handlerAddStudent"></addStudents>
        <!-- 添加已有学员 end-->


    </div>
</template>
<script>
    import adminHeader from '../components/adminHeader.vue'
    import addStudents from '../components/addStudents.vue'
    export default {
        components:{
         adminHeader:adminHeader,
         addStudents:addStudents
        },
        data(){
            return{
                // 记录当前队伍索引
                currentTeamIndex:0,
                // 记录当前空成员的索引，可以理解为行数
                currentTeamEmptyArr:[],
                //
                studentsAll:false,
                // excel格式报错
                dialogErr:false,
                // 已填写的学员组数
                existsStudents: 0,
                // 合计学员数
                countStudents: 0,
                // 学员组数组,最后用来统计组数
                teamArr: [],
                //商战模拟(默认)
                courseContentShow:'creatCourseOne',
                
                // tab切换
                tabShow:'创建课程',
                // 表单对齐方式
                labelPosition:'top',
                // 临时运行轮数数组
                tmpRoundNum: [
                    {
                        roundNum: 1,
                        startDate: "",
                        startTime: ""
                    },
                    {
                        roundNum: 2,
                        startDate: "",
                        startTime: ""
                    },
                    {
                        roundNum: 3,
                        startDate: "",
                        startTime: ""
                    },
                    {
                        roundNum: 4,
                        startDate: "",
                        startTime: ""
                    },
                ],
                // 创建课程数据
                createCourseData:{
                     // 课程名称
                    courseName:"",
                    // 进入时间
                    earlyEnterTime:'',
                    // 开始日期
                    sDate:'',
                    // 开始时间
                    sTime:'',
                    // 结束日期
                    eDate:'',
                    // 结束时间
                    eTime:'',
                    // 开始日期及时间
                    startTime: '',
                    // 结束日期及时间
                    endTime: '',
                    // 轮数
                    roundsNumber:'',
                    // 自动运行
                    // elapsedTime:'',
                    // 讲师
                    lecturer:'',
                    // 用户ID
                    createUser:0,
                    // 是否自动运行 0 不自动运行 1自动运行
                    autoRun: 0,
                    // 自动运行时间间隔
                    autoRunTime: "",
                    // 自动运行数组
                    courseRoundModels:[],
                    nickName:'',
                },
                // 轮数options
                options:[
                    {
                        label:'4', value:'4'
                    },
                    {
                        label:'5', value:'5'
                    },
                    {
                        label:'6', value:'6'
                    }
                ],
                // 组数
                // groupNumber:'',
                // 组数options
                groupData:[
                    {
                        label:'4', value:'4'
                    },
                    {
                        label:'5', value:'5'
                    },
                    {
                        label:'6', value:'6'
                    }
                ],
                
                // 自动运行显示
                runningshow:false,
                // 是否需要培训讲师
                isNeedLecturer: false,
                // 商战模拟
                businessSimulation:false,

                // 手动创建队伍
                contentData:[],
                // 职业
                getPositionAll:[],
                // 导入队伍
                modalContentData:[],
                // 批量导入弹窗a
                dialogVisible:false,
                // 创建成功弹窗
                successModal:false,
                // 导入modail
                importModal:false,
                // 学员数据
                studentData:[
                    {
                        imgSrc:'../../static/image/icon-default-avatar-large.png',
                        phone:'15795879500',
                        name:'张三',
                        age:'100',
                        gender:'男',
                        job:'ceo',
                        createTime:'2018/06/29'
                    },
                    
                ],

                // 创建课程空提示
                courseNameErr:false,
                enterTimeErr:false,
                enterTimeErr1:false,
                enterTimeTextErr:false,
                startDateErr:false,
                startTimeErr:false,
                endDateErr:false,
                endTimeErr:false,
                roundsNumberErr:false,
                firstDateErr:false,
                firstTimeErr:false,
                sencodDateErr:false,
                sencodTimeErr:false,
                thirdDateErr:false,
                thirdTimeErr:false,
                fourthDateErr:false,
                fourthTimeErr:false,
                autoRunTimeErr:false,
                lecturerErr:false,
                endTimeHaErr:false, // 错误文本
                hasError:false, //  是否有错
                phoneFormatErr:false, // 手机格式错误
                phoneRepeatErr:false, // 手机重复错误
                creatTipBox:false,

                // 导入返回的数量，用来判断选择的队伍数是否一致（队伍数目前没有）
                importNumbers:0,
                
                // 上传文件时是否存在错误,默认无错误
                importHasError:false,
                

            }
        },
        methods:{
            // 弹窗
             handleClose(done) {
                 this.dialogVisible = false;
                 this.successModal = false;
                
            },
            /**
             *  文件上传前钩子验证
             */
            beforeAvatarUpload(file) {
                var testmsg=file.name.substring(file.name.lastIndexOf('.')+1) 
                const extension = testmsg === 'xls'  
                const extension2 = testmsg === 'xlsx'  
                const isLt2M = file.size / 1024 / 1024 < 10  
                if(!extension && !extension2) {
                // 如果if进来，说明存在错误，赋值为true，后面只要判断如果为true就提示
                this.importHasError = true;
                this.dialogErr = true;
                // dialogErr
                    this.$message({  
                        message: '上传文件只能是 xls、xlsx格式!',  
                        type: 'error'  
                    });  
                } else{
                    this.dialogErr = false;
                    this.importHasError = false;
                }
                if(!isLt2M) { 
                // 如果if进来，说明存在错误，赋值为true，后面只要判断如果为true就提示
                this.importHasError = true
                    this.$message({  
                        message: '上传文件大小不能超过 10MB!',  
                        type: 'error'  
                    });  
                }  
                return extension || extension2 && isLt2M  
            },

            /*
            * 上传成功后的钩子
            */
            handleSuccess(response, file, fileList){
                console.log(response);
                if(response.errCode == 0){
                    // // 队伍列表弹窗显示
                    // this.importModal = true;
                    // 导入数据赋值
                    this.modalContentData = response.data;
                }else{
                    // 错误提示取消
                    this.importHasError = false;
                }
                

                //this.importNumbers = response.data.length;
                //console.log(this.importNumbers)
                // if (response.data.length > 0) {
                //     this.requestTeams2 = response.data;// 接口返回，然后赋值
                //     this.plModal = 0;
                // }else{
                // this.faModal = 1;
                // }
            }, 
            
            // 下一步
            businessSimulationNex(){
                // 验证是否为空
                for (let item in this.createCourseData) {
                    if(item == 'courseName'){
                        if(this.createCourseData.courseName == ''){
                            this.courseNameErr = true;
                        }else{
                            this.courseNameErr = false;
                        }
                    };
                    if(item == 'earlyEnterTime'){
                        if(this.createCourseData.earlyEnterTime == ''){
                            this.enterTimeErr = true;
                            this.enterTimeErr1 = false;

                        }else if (!Number.parseFloat(this.createCourseData.earlyEnterTime)){
                            this.enterTimeErr = false;
                            this.enterTimeErr1 = true;
                            this.enterTimeTextErr = false;
                        } else {
                            this.enterTimeErr = false;
                            this.enterTimeErr1 = false;
                            if (!(this.createCourseData.earlyEnterTime >= 0.5 && this.createCourseData.earlyEnterTime <= 168)) {
                                this.enterTimeTextErr = true;
                            } else {
                                this.enterTimeTextErr = false;
                                this.enterTimeErr1 = false;
                            }
                            
                        }
                    };
                    if(item == 'startDate'){
                        if(this.createCourseData.sDate == ''){
                            this.startDateErr = true;
                        }else{
                            this.startDateErr = false;
                        }
                    };
                    if(item == 'startTime'){
                        if(this.createCourseData.sTime == ''){
                            this.startTimeErr = true;
                        }else{
                            this.startTimeErr = false;
                        }
                    };
                    if(item == 'endDate'){
                        if(this.createCourseData.eDate == ''){
                            this.endDateErr = true;
                        }else{
                            this.endDateErr = false;
                            if (this.createCourseData.eDate < this.createCourseData.sDate) {
                                this.endTimeHaErr = true;
                            } else {
                                this.endTimeHaErr = false;
                            }
                        }
                    };
                    if(item == 'endTime'){
                        if(this.createCourseData.eTime == ''){
                            this.endTimeErr = true;
                        }else{
                            this.endTimeErr = false;
                        }
                    };
                    if(item == 'roundsNumber'){
                        if(this.createCourseData.roundsNumber == ''){
                            this.roundsNumberErr = true;
                        }else{
                            this.roundsNumberErr = false;
                        }
                    };
                };

                // 禁止下一步按钮点击
                if (this.courseNameErr === false && this.enterTimeErr === false && this.startDateErr === false && this.startTimeErr === false && this.endDateErr === false && this.endTimeErr === false && this.roundsNumberErr === false &&
                this.enterTimeTextErr == false) {
                    this.hasError = false;
                } else {
                    this.hasError = true;
                    return;
                };

                // 获取登录会话中用户name和id
                let nickname = JSON.parse(sessionStorage.getItem('login')).name
                let createUser = JSON.parse(sessionStorage.getItem('login')).id
                this.createCourseData.nickName = nickname
                this.createCourseData.createUser = createUser

                // 合并开始日期和时间为一个字符串
                this.createCourseData.startTime = this.createCourseData.sDate + ' ' + this.createCourseData.sTime
                // 删除开始日期对象属性
                // delete this.createCourseData.sDate
                // delete this.createCourseData.sTime
                // 合并结束日期和时间为一个字符串
                this.createCourseData.endTime = this.createCourseData.eDate + ' ' + this.createCourseData.eTime
                // 删除多余的开始日期属性
                // delete this.createCourseData.eDate
                // delete this.createCourseData.eTime


                // 如果自动运行被勾选，则需要courseRoundModels数组
                if (this.runningshow) {
                    // 创建一个空数组
                    let courseRoundModelsArr = [];
                    // 循环自动运行的轮数，把日期和时间合并
                    for (const key in this.tmpRoundNum) {
                        var courseRoundModels = {
                            startTime:  this.tmpRoundNum[key].startDate + ' ' + this.tmpRoundNum[key].startTime,
                            roundNum: this.tmpRoundNum[key].roundNum
                        }
                        courseRoundModelsArr.push(courseRoundModels)
                    }

                    console.log(courseRoundModelsArr);
                    // return
                    // 最后把新数组赋值给courseRoundModels
                    this.createCourseData.courseRoundModels = courseRoundModelsArr;

                    this.createCourseData.autoRun = 1;
                } else {
                    this.createCourseData.autoRun = 0;
                }

                
                // 判断是否勾选培训讲师，如果未勾选则讲师值为空
                if (!this.isNeedLecturer) {
                    this.createCourseData.lecturer = '';
                }

                // 判断autoRun是否勾选，未勾选删除courseRoundModels字段
                if (this.createCourseData.autoRun === 0) {
                    delete this.createCourseData.courseRoundModels
                }

                console.log(JSON.stringify(this.createCourseData))

               
                // 根据队伍数生成队伍 默认6组
                let teamsNumber = 6;
                let data = {};
                this.contentData = []; // 初始化
                this.itemNum = 65; // 初始化
                for (let index = 0; index < teamsNumber; index++) {
                    data = {
                        teamName:"队伍"+String.fromCharCode(this.itemNum),
                        requestTeamMembers:[]
                    };
                    for (let j = 0;j < 10; j++) {
                        let data2 = {
                            studentNum: '学员'+(j+1),
                            name: '',
                            mobile: '',
                            gender: '',
                            department:'',
                            position:0
                        }
                        data.requestTeamMembers.push(data2)
                    }
                    this.contentData.push(data)
                    this.itemNum++
                }

                // 显示 加入学员 模块
                this.courseContentShow = 'creatCourseTwo'
                // this.hasError = false;
                // console.log(this.hasError)
            },
            // 手动创建 上一步
            createManually(){
                this.courseContentShow = 'creatCourseOne'
            },
            // 导入上一步
            importCreatStep(){
                this.dialogVisible = true;
                this.importModal = false;
            },
            // 导入创建课程
            importCreatCourse(){
                
                //  导入学员弹窗显示
                 this.importModal = true;
                 
                // 上传文件弹窗消失
                this.dialogVisible = false;
            },
            // 导入创建成功
            importCreatSuccess(){
                // 位置索引，记录错误应该所在的位置
                let positionArr = [];
                
                // 四层循环，外两层用来和内两层比较是否相同
                for(let a in this.modalContentData){
                    for (let b in this.modalContentData[a].requestTeamMembers){
                        if (this.modalContentData[a].requestTeamMembers[b].mobile != '') {
                            // 错误数
                            let count = 0;
                            // 运行到这里时，这是是把所有有值的手机号找出来，和外层有值的手机号比较，如果存在相同且大于等于2，则视为重复
                            for(let c in this.modalContentData){
                                for (let d in this.modalContentData[c].requestTeamMembers){
                                    if (this.modalContentData[c].requestTeamMembers[d].mobile != '') {
                                        if (this.modalContentData[a].requestTeamMembers[b].mobile == this.modalContentData[c].requestTeamMembers[d].mobile) {
                                            count++;
                                        }
                                    }
                                }
                            }
                            // 大于等于2，说明存在重复
                            if (count >= 2) {
                                // 这里用一个对象存储队伍索引和成员索引，可以理解为某个队伍某行成员的某个错误
                                let data = {
                                    teamIndex:a,
                                    memberIndex:b,
                                    errorText:'手机号码重复'
                                };
                                positionArr.push(data)
                            }
                        }
                    }
                }

                /******** 手机格式验证 start ********/
                let reg = /^[1][3,4,5,7,8][0-9]{9}$/; //格式正则表达式
                for(let i in this.modalContentData){
                    for (let j in this.modalContentData[i].requestTeamMembers){
                        if (this.modalContentData[i].requestTeamMembers[j].mobile != '') {
                            // 验证手机格式
                            if (!reg.test(this.modalContentData[i].requestTeamMembers[j].mobile)) {
                                let data = {
                                    teamIndex:i,
                                    memberIndex:j,
                                    errorText:'手机号码格式错误'
                                };
                                positionArr.push(data)
                            }
                        }
                    }
                }
                /******** 手机格式验证 end ********/

                console.log(positionArr)
                /******** 循环错误并且在相应位置显示错误 start ********/
                // 如果长度大于0说明是有错误的，不能调接口
                if (positionArr.length > 0) {
                    for (const key in positionArr) {
                        const element = positionArr[key];
                        document.getElementsByClassName('teamContent1')[element.teamIndex].getElementsByClassName('emptyTip3')[element.memberIndex].innerHTML = element.errorText
                    }
                    return
                }
                
                /******** 循环错误并且在相应位置显示错误 end ********/

                let teamTotalNum = 0;  // 填写后的队伍数
                // 1. 队伍先循环
                for (let i = 0; i < this.modalContentData.length; i++) {
                    // 手机号是否为空
                    let mobileIsNotEmpty = false;

                    // 队伍数组里的成员数组
                    let teamDataArray = this.modalContentData[i].requestTeamMembers;
                    // 2. 然后再循环队伍里面的成员
                    for (let j = 0; j < teamDataArray.length; j ++) {
                        // 3. 判断成员里面的手机号是否为空，只要有一个不为空，就有一个true
                        if (teamDataArray[j].mobile != '') {
                            mobileIsNotEmpty = true;
                        }
                        delete teamDataArray[j].repeat
                    }

                    // 4. 这个队伍的成员循环下来后，只要存在一个手机号，那么mobileIsNotEmpty就为true，只要为true，队伍就加1，这样就有一个队伍里面至少填写了一个手机号，然后进入下一个队伍循环，再循环队伍里面的成员，，只要存在一个手机号。。。就这样循环，后面只要判断队伍数是否大于等于4就行
                    if (mobileIsNotEmpty) {
                        teamTotalNum++;
                    }
                }

                // 5. 所有队伍循环下来后，判断上面teamTotalNum队伍数是否小于4，小于4提醒
                if (teamTotalNum < 4) {
                    alert('队伍数必须大于等于4');
                    return;
                }

                for (const teamIndex in this.modalContentData) {
                    const team = this.modalContentData[teamIndex];
                    for (const memberIndex in team.requestTeamMembers) {
                        const member = team.requestTeamMembers[memberIndex];
            
                        if (member.position==''||member.position == null||member.position==undefined)  {
                            member.position = 0
                        }
                    }
                }

                // 接口
                let data = {
                    lecturer: this.createCourseData.lecturer,
                    courseName : this.createCourseData.courseName,
                    startTime : this.createCourseData.startTime,
                    endTime : this.createCourseData.endTime,
                    roundNumber : this.createCourseData.roundsNumber,
                    nickName : this.createCourseData.nickName,
                    // memberId : this.createCourseData.memberId,
                    autoRun : this.createCourseData.autoRun,
                    autoRunTime : parseInt(this.createCourseData.autoRunTime),
                    earlyEnterTime : parseInt(this.createCourseData.earlyEnterTime),
                    createUser : this.createCourseData.createUser,
                    courseRoundModels : this.createCourseData.courseRoundModels,
                    requestTeams : this.modalContentData,
                }
                // 判断是否勾选培训讲师，如果未勾选则讲师值为空
                if (!this.isNeedLecturer) {
                    this.createCourseData.lecturer = '';
                }

                // 判断autoRun是否勾选，未勾选删除courseRoundModels字段
                if (this.createCourseData.autoRun === 0) {
                    delete this.createCourseData.courseRoundModels
                }
                console.log(data);
                console.log(JSON.stringify(data));
                // return
                this.$http.addCourse(data,(res)=>{
                    if(res.errCode == 0){
                        // 创建课程成功dialog
                        this.successModal = true;
                        this.importModal = false;
                    }else{
                        //console.log(res.data.message)
                        
                    }
                    console.log(res)
                },(errRes)=>{
                    console.log(errRes)
                })
            },

            // 手动创建确认
            creatCourse(){
                // 位置索引，记录错误应该所在的位置
                let positionArr = [];
                
                // 四层循环，外两层用来和内两层比较是否相同
                for(let a in this.contentData){
                    for (let b in this.contentData[a].requestTeamMembers){
                        if (this.contentData[a].requestTeamMembers[b].mobile != '') {
                            // 错误数
                            let count = 0;
                            // 运行到这里时，这是是把所有有值的手机号找出来，和外层有值的手机号比较，如果存在相同且大于等于2，则视为重复
                            for(let c in this.contentData){
                                for (let d in this.contentData[c].requestTeamMembers){
                                    if (this.contentData[c].requestTeamMembers[d].mobile != '') {
                                        if (this.contentData[a].requestTeamMembers[b].mobile == this.contentData[c].requestTeamMembers[d].mobile) {
                                            count++;
                                        }
                                    }
                                }
                            }
                            // 大于等于2，说明存在重复
                            if (count >= 2) {
                                // 这里用一个对象存储队伍索引和成员索引，可以理解为某个队伍某行成员的某个错误
                                let data = {
                                    teamIndex:a,
                                    memberIndex:b,
                                    errorText:'手机号码重复'
                                };
                                positionArr.push(data)
                            }
                        }
                    }
                }

                /******** 手机格式验证 start ********/
                let reg = /^[1][3,4,5,7,8][0-9]{9}$/; //格式正则表达式
                for(let i in this.contentData){
                    for (let j in this.contentData[i].requestTeamMembers){
                        if (this.contentData[i].requestTeamMembers[j].mobile != '') {
                            // 验证手机格式
                            if (!reg.test(this.contentData[i].requestTeamMembers[j].mobile)) {
                                let data = {
                                    teamIndex:i,
                                    memberIndex:j,
                                    errorText:'手机号码格式错误'
                                };
                                positionArr.push(data)
                            }
                        }
                    }
                }
                /******** 手机格式验证 end ********/

                console.log(positionArr)
                /******** 循环错误并且在相应位置显示错误 start ********/
                // 如果长度大于0说明是有错误的，不能调接口
                if (positionArr.length > 0) {
                    for (const key in positionArr) {
                        const element = positionArr[key];
                        document.getElementsByClassName('teamContent')[element.teamIndex].getElementsByClassName('emptyTip2')[element.memberIndex].innerHTML = element.errorText
                    }
                    return
                }
                
                /******** 循环错误并且在相应位置显示错误 end ********/

                let teamTotalNum = 0;  // 填写后的队伍数
                // 1. 队伍先循环
                for (let i = 0; i < this.contentData.length; i++) {
                    // 手机号是否为空
                    let mobileIsNotEmpty = false;

                    // 队伍数组里的成员数组
                    let teamDataArray = this.contentData[i].requestTeamMembers;
                    // 2. 然后再循环队伍里面的成员
                    for (let j = 0; j < teamDataArray.length; j ++) {
                        // 3. 判断成员里面的手机号是否为空，只要有一个不为空，就有一个true
                        if (teamDataArray[j].mobile != '') {
                            mobileIsNotEmpty = true;
                        }
                        delete teamDataArray[j].repeat
                    }

                    // 4. 这个队伍的成员循环下来后，只要存在一个手机号，那么mobileIsNotEmpty就为true，只要为true，队伍就加1，这样就有一个队伍里面至少填写了一个手机号，然后进入下一个队伍循环，再循环队伍里面的成员，，只要存在一个手机号。。。就这样循环，后面只要判断队伍数是否大于等于4就行
                    if (mobileIsNotEmpty) {
                        teamTotalNum++;
                    }
                }

                // 5. 所有队伍循环下来后，判断上面teamTotalNum队伍数是否小于4，小于4提醒
                if (teamTotalNum < 4) {
                    alert('队伍数必须大于等于4');
                    return;
                }

                // 接口
                let data = {
                    lecturer: this.createCourseData.lecturer,
                    courseName : this.createCourseData.courseName,
                    startTime : this.createCourseData.startTime,
                    endTime : this.createCourseData.endTime,
                    roundNumber : this.createCourseData.roundsNumber,
                    nickName : this.createCourseData.nickName,
                    // memberId : this.createCourseData.memberId,
                    autoRun : this.createCourseData.autoRun,
                    autoRunTime : parseInt(this.createCourseData.autoRunTime),
                    earlyEnterTime : parseInt(this.createCourseData.earlyEnterTime),
                    createUser : this.createCourseData.createUser,
                    courseRoundModels : this.createCourseData.courseRoundModels,
                    requestTeams : this.contentData,
                }
                // 判断是否勾选培训讲师，如果未勾选则讲师值为空
                if (!this.isNeedLecturer) {
                    this.createCourseData.lecturer = '';
                }

                // 判断autoRun是否勾选，未勾选删除courseRoundModels字段
                if (this.createCourseData.autoRun === 0) {
                    delete this.createCourseData.courseRoundModels
                }
                console.log(data);
                console.log(JSON.stringify(data));
                this.$http.addCourse(data,(res)=>{
                    if(res.errCode == 0){
                        // 创建课程成功dialog
                        this.successModal = true;
                    }else{
                        //console.log(res.data.message)
                        
                    }
                    console.log(res)
                },(errRes)=>{
                    console.log(errRes)
                })
            },
            // 创建课程失去焦点验证
            validateData:function(type){
                if(type == 'courseName'){
                    if(this.createCourseData.courseName == ''){
                        this.courseNameErr = true;
                    }else{
                        this.courseNameErr = false;
                    }
                };
                if(type == 'earlyEnterTime'){
                    if(this.createCourseData.earlyEnterTime == ''){
                        this.enterTimeErr = true;
                        this.enterTimeErr1 = false;
                    }else if(!Number.parseFloat(this.createCourseData.earlyEnterTime)){
                        this.enterTimeErr = false;
                        this.enterTimeErr1 = true;
                        this.enterTimeTextErr = false;
                    }else {
                        this.enterTimeErr = false;
                        this.enterTimeErr1 = false;
                        if (!(this.createCourseData.earlyEnterTime >= 0.5 && this.createCourseData.earlyEnterTime <= 168)) {
                            this.enterTimeTextErr = true;
                        } else {
                            this.enterTimeTextErr = false;
                            this.enterTimeErr1 = false;
                        }
                        
                    }
                };
                if(type == 'startDate'){
                    if(this.createCourseData.sDate == ''){
                        this.startDateErr = true;
                    }else{
                        this.startDateErr = false;
                    }
                };
                if(type == 'startTime'){
                    if(this.createCourseData.sTime == ''){
                        this.startTimeErr = true;
                    }else{
                        this.startTimeErr = false;
                    }
                };
                if(type == 'endDate'){
                    if(this.createCourseData.eDate == ''){
                        this.endDateErr = true;
                    }else{
                        this.endDateErr = false;
                        if (this.createCourseData.eDate < this.createCourseData.sDate) {
                            this.endTimeHaErr = true;
                        } else {
                            this.endTimeHaErr = false;
                        }
                    }
                };
                if(type == 'endTime'){
                    if(this.createCourseData.eTime == ''){
                        this.endTimeErr = true;
                    }else{
                        this.endTimeErr = false;
                    }
                };
                if(type == 'roundsNumber'){
                    if(this.createCourseData.roundsNumber == ''){
                        this.roundsNumberErr = true;
                    }else{
                        this.roundsNumberErr = false;
                    }
                };
                // if(type == 'autoRunTime'){
                //     if(this.createCourseData.autoRunTime == ''){
                //         this.autoRunTimeErr = true;
                //     }else{
                //         this.autoRunTimeErr = false;
                //     }
                // };
                if(type == 'lecturer'){
                    if(this.createCourseData.lecturer == ''){
                        this.lecturerErr = true;
                    }else{
                        this.lecturerErr = false;
                    }
                };

                // 禁止下一步按钮点击
                if (this.courseNameErr === false && this.enterTimeErr === false && this.startDateErr === false && this.startTimeErr === false && this.endDateErr === false && this.endTimeErr === false && this.roundsNumberErr === false) {
                    this.hasError = false;
                } else {
                    this.hasError = true;
                }

                
                
            },
            // 时间转换Y-m-d H:i:s
            toYmdHis:function(dateStr, timeStr){
                let currentDateTime = dateStr;
                let currentDate = new Date(dateStr);
                let Year = currentDate.getFullYear();
                let Month = (currentDate.getMonth()+1);
                Month = Month < 10 ? ('0' + Month) : Month;
                let Day = currentDate.getDate();
                Day = Day < 10 ? ('0' + Day) : Day;
                let dataArr = [Year,Month,Day];
                let cDate = dataArr.join('-');
                return cDate + ' ' + timeStr;
            },
            // 时间转换 Y年m月d日
            toYmdStr:function(dateStr){
                let dateTime = new Date(dateStr);
                let Year = dateTime.getFullYear();
                let Month = (dateTime.getMonth()+1);
                Month = Month < 10 ? ('0' + Month) : Month;
                let Day = dateTime.getDate();
                Day = Day < 10 ? ('0' + Day) : Day;
                return Year + '年' + Month + '月' + Day + '日';
            },
            // 时间戳转字符串 如 1530426600 转成 "2018-07-01 14:30"
            timestampToStr(timestamp){
                let dateTime = new Date(timestamp * 1000)
                let Year = dateTime.getFullYear();
                let Month = (dateTime.getMonth()+1);
                Month = Month < 10 ? ('0' + Month) : Month;
                let Day = dateTime.getDate();
                Day = Day < 10 ? ('0' + Day) : Day;
                let Hour = dateTime.getHours();
                Hour = Hour < 10 ? ('0' + Hour) : Hour;
                let Minute = dateTime.getMinutes();
                Minute = Minute < 10 ? ('0' + Minute) : Minute;
                
                let dateArr = [Year,Month,Day];
                let timeArr = [Hour,Minute];
                
                let dateStr = dateArr.join('-');
                let timeStr = timeArr.join(':');
                return dateStr + ' ' + timeStr;
            },
            
            /**
             * 大致思路：
             * 1. 首先自动间隔时间和轮数的时间都是手填或者选择的，这些都是字符串，字符串之间不能计算，只有整型才能计算
             * 2. 转成整型相加才能得到下一轮的总时间(时间戳)，这里整型一个是指自动间隔时间的秒数，另一个是指"2018-07-01 14:30"这个时间的总秒数 如 1530426600(时间戳，一般Y-m-d或者Y-m-d H:i:s转成的秒数的叫时间戳，前面那个只能算秒数)
             * 举个栗子：我要在"2018-07-01 14:30"加30分钟，30分钟的秒数为1800=30*60，"2018-07-01 14:30"的秒数为1530426600，那么只要秒数相加就可以得到"2018-07-01 15:00"的时间戳了，1530426600 + 1800 = 1530428400 
             * 3. 上面理解后，那么现在先得到自动运行的时间间隔秒数，然后循环临时轮数数组(这里面有几轮，页面就有几轮，也就是总的)，第一次循环肯定是第一轮的，拿到第一轮的总秒数(时间戳)，后面轮数都要根据第一轮的秒数加时间间隔秒数就行了，但是后面轮数的时间间隔秒数并不是固定的，第二轮加1倍的时间间隔秒数，第三轮加2倍的时间间隔秒数，第四轮加3倍的时间间隔秒数，这样，每轮循环就得到各自的时间戳
             * 4. 得到每轮的时间戳后还需要转成字符串，因为不能直接赋值秒数给页面上的日期时间表单，赋值要用字符串来赋值，所以要转成字符串，如"2018-07-01 14:30"这样的格式，但是页面上日期和时间是分开的，所以还要对这个字符串分割一下，这里空格分割就可以得到日期和时间，数组下标0为日期，1为时间，然后直接赋值给当前的data属性(this.tmpRoundNum[key].startDate)就出来了
             */
            // 第一轮触发的事件
            firstHandler(index){
                // 判断当前是否为0，为0则是第一轮
                if (index === 0) {
                    // 计算自动间隔时间的秒数 分钟转秒数 1分钟60秒，n分钟的秒数为n*60
                    let countAutoRunTime = this.createCourseData.autoRunTime * 60;

                    // 第一轮日期时间格式的时间戳 如 "2018-07-01 14:30" 转成 1530426600
                    let firstDateTimestamp = '';

                    // 循环临时轮数
                    for (const key in this.tmpRoundNum) {
                        // 因为数组第一个的索引都为0，所以这里判断是否为第一轮
                        if (key == index) {
                            // 如果为第一轮，则把前面选择的日期和后面选择的时间拼接起来，形成如"2018-07-01 14:30"，然后转成时间戳格式如1530426600，这样就拿到第一轮的时间戳，然后后面的值都根据这个以及前面自动间隔时间转成的秒数来计算
                            firstDateTimestamp = ((new Date(this.tmpRoundNum[key].startDate + ' ' + this.tmpRoundNum[key].startTime)).getTime() / 1000)
                            // console.log(firstDateTimestamp);
                        } else {
                            // 这里必须把key转成整型，不然会报错~ :D
                            let i = parseInt(key);
                            // 这里就用自动间隔时间(秒数的) 乘以 整型的索引 就得到了 当前第n轮的时间戳啦 :) 
                            // ps:为什么要乘以索引，因为数组的第二个是1，第二轮只要乘以1次时间间隔秒数，就得到了间隔的时间戳了，那么第三轮只要乘以2次时间间隔秒数，就得到了两个间隔的时间戳了，以此类推，即第n轮乘以i(也就是key的整型)次时间间隔秒数（也可以理解为第n轮乘以n-1次，当然这里第一轮是排除的）
                            let currentAutoRunTimestamp = countAutoRunTime * i
                            // console.log(currentAutoRunTimestamp);
                            let dateTimeArr = (this.timestampToStr(firstDateTimestamp + currentAutoRunTimestamp)).split(' ');
                            // console.log(this.timestampToStr(firstDateTimestamp + currentAutoRunTimestamp))
                             this.tmpRoundNum[key].startDate = dateTimeArr[0]
                             this.tmpRoundNum[key].startTime = dateTimeArr[1]
                        }
                    }
                }
            },


            // 鼠标滚轮事件
            handleScroll(){
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                // console.log("scrollTop为:" + scrollTop)
                if(scrollTop > 400  && this.importModal == false){
                    this.creatTipBox = true;
                }else{
                    this.creatTipBox = false;
                }
                
            },

            // 手机号失去焦点验证是否重复、格式是否错误
            blurValidator(mobile,contentData,event){
                let count = 0;
                let nextTarget = event.target.nextElementSibling;

                for(let i in contentData){
                    for (let j in contentData[i].requestTeamMembers){
                        // 判断手机号码是否重复，重复则count+1
                        if (contentData[i].requestTeamMembers[j].mobile == mobile && mobile != '') {
                            count++;
                            if (count >= 2) {
                                contentData[i].requestTeamMembers[j].repeat = true
                            } else {
                                contentData[i].requestTeamMembers[j].repeat = false
                            }
                        } 
                    }
                    
                }

                // 从这里开始，这里mobileArr为填写后的手机号数组，把所有填写的手机号存到一个数组里，一个手机号为一个成员，到时候只要统计这个数组长度就得出学员数量了
                let mobileArr = [];
                let teamTotalNum = 0;
                let reg = /^[1][3,4,5,7,8][0-9]{9}$/; //格式正则表达式

                /******** 把非空的值（手机号码）加入到一个数组中 start */
                for(let i in this.contentData){
                    // 手机号是否为空
                    let mobileIsNotEmpty = false;
                    for (let j in this.contentData[i].requestTeamMembers){
                        if (this.contentData[i].requestTeamMembers[j].mobile != '' && reg.test(this.contentData[i].requestTeamMembers[j].mobile) && this.contentData[i].requestTeamMembers[j].repeat == false) {
                            mobileArr.push(this.contentData[i].requestTeamMembers[j].mobile);
                            mobileIsNotEmpty = true;
                        }
                    }

                    if (mobileIsNotEmpty) {
                        teamTotalNum++;
                    }
                }
                /******** 把非空的值（手机号码）加入到一个数组中 end */
                console.log(teamTotalNum)
                console.log(mobileArr)
                // 基本验证
                if (mobile != '') {
                    if(!reg.test(mobile)){
                        nextTarget.innerHTML = '手机号码格式错误'
                        nextTarget.style.display= 'block'
                        this.hasError = true
                        this.hasErrorText = '手机号有错误，请检查填写信息'
                    } else if(count>=2){
                        nextTarget.innerHTML = '手机号码重复'
                        nextTarget.style.display= 'block'
                        this.hasError = true
                        this.hasErrorText = '手机号码重复，请检查手机号'
                    } else {
                        nextTarget.innerHTML = ''
                        nextTarget.style.background= 'none'
                        this.hasError = false
                        this.hasErrorText = ''
                    }
                } else {
                    nextTarget.innerHTML = '' // 这里是为了如果写了错误的手机号码，下面会有提示，删除手机号码还会存在，就在这里清空
                    nextTarget.style.background= 'none' // 同上
                }

                this.existsStudents = teamTotalNum;
                this.countStudents = mobileArr.length
                // this.confirmCreateCourse(1);
            },

            // 添加已有学员
            addStudents(index){
                this.currentTeamIndex = index
                for (const key in this.contentData[index].requestTeamMembers) {
                    if (this.contentData[index].requestTeamMembers.hasOwnProperty(key)) {
                        const element = this.contentData[index].requestTeamMembers[key];
                        // console.log(element)
                        // 判断手机号是否为空，如果为空，则记录位置，可以理解为行数
                        if (element.mobile == '') {
                            this.currentTeamEmptyArr.push(key)
                        }
                    }
                }
                // return
                this.studentsAll = true;
                this.courseContentShow = false;
            } ,
            // 加入
            // sjoin(){
            //     this.studentsAll = false;
            //     this.courseContentShow = true;
            // },
            handlerAddStudent(v){
                // 这里传的值是一个数组，值为选择的学员，不是id，是一个对象，每个元素包含学员各种信息
                for (let j = 0;j < v.length; j++) {
                    if (this.currentTeamEmptyArr.length > 0) {
                        // 这里this.contentData长度为6，也就是6个元素对应6组队伍，那怎么知道我是从哪锅队伍上面点的添加已有学员呢，还记得前面有一个记录队伍的索引嘛，没错就是这个this.currentTeamIndex，既然知道队伍的索引了，那不就可以找到指定位置的队伍了？this.contentData[this.currentTeamIndex] 这样就是某一个指定的队伍了，但是队伍里面还有很多成员，this.contentData[this.currentTeamIndex].teamData这个就是队伍的成员数组，目前一共有10个，前面勾选了几个学员这里就循环几次，填充就行了this.contentData[this.currentTeamIndex].requestTeamMembers[j] 这样就是找到第一个元素，这个元素是个对象，对象里的属性是各种成员信息，this.contentData[this.currentTeamIndex].requestTeamMembers[j].name 这样就是某个队伍的某行数据的某个输入框，简单的说就是可以把this.contentData[this.currentTeamIndex].requestTeamMembers[j]看成某一行，this.contentData[this.currentTeamIndex].requestTeamMembers[j].name看成某一行的某一个输入框或者下拉菜单
                        this.contentData[this.currentTeamIndex].requestTeamMembers[this.currentTeamEmptyArr[j]].name = v[j].name
                        this.contentData[this.currentTeamIndex].requestTeamMembers[this.currentTeamEmptyArr[j]].mobile = v[j].mobile
                        this.contentData[this.currentTeamIndex].requestTeamMembers[this.currentTeamEmptyArr[j]].gender = v[j].gender
                        this.contentData[this.currentTeamIndex].requestTeamMembers[this.currentTeamEmptyArr[j]].department = v[j].department
                        this.contentData[this.currentTeamIndex].requestTeamMembers[this.currentTeamEmptyArr[j]].position = v[j].positionId
                    } else {
                        break
                    }

                }

                for(let i in this.contentData){
                    for (let j in this.contentData[i].requestTeamMembers){ 
                        this.contentData[i].requestTeamMembers[j].repeat = false
                    }
                }

                 // 从这里开始，这里mobileArr为填写后的手机号数组，把所有填写的手机号存到一个数组里，一个手机号为一个成员，到时候只要统计这个数组长度就得出学员数量了
                let mobileArr = [];
                let teamTotalNum = 0;
                let reg = /^[1][3,4,5,7,8][0-9]{9}$/; //格式正则表达式
                /******** 把非空的值（手机号码）加入到一个数组中 start */
                for(let i in this.contentData){
                    // 手机号是否为空
                    let mobileIsNotEmpty = false;
                    for (let j in this.contentData[i].requestTeamMembers){
                        if (this.contentData[i].requestTeamMembers[j].mobile != '' && reg.test(this.contentData[i].requestTeamMembers[j].mobile) && this.contentData[i].requestTeamMembers[j].repeat == false) {
                            mobileArr.push(this.contentData[i].requestTeamMembers[j].mobile);
                            mobileIsNotEmpty = true;
                        }
                    }

                    if (mobileIsNotEmpty) {
                        teamTotalNum++;
                    }
                }
                /******** 把非空的值（手机号码）加入到一个数组中 end */
        
                
                // // 基本验证
                // if (mobile != '') {
                //     if(!reg.test(mobile)){
                //         nextTarget.innerHTML = '手机号码格式错误'
                //         nextTarget.style.display= 'block'
                //         this.hasError = true
                //         this.hasErrorText = '手机号有错误，请检查填写信息'
                //     } else if(count>=2){
                //         nextTarget.innerHTML = '手机号码重复'
                //         nextTarget.style.display= 'block'
                //         this.hasError = true
                //         this.hasErrorText = '手机号码重复，请检查手机号'
                //     } else {
                //         nextTarget.innerHTML = ''
                //         nextTarget.style.background= 'none'
                //         this.hasError = false
                //         this.hasErrorText = ''
                //     }
                // } else {
                //     nextTarget.innerHTML = '' // 这里是为了如果写了错误的手机号码，下面会有提示，删除手机号码还会存在，就在这里清空
                //     nextTarget.style.background= 'none' // 同上
                // }

                this.existsStudents = teamTotalNum;
                this.countStudents = mobileArr.length
                // console.log(this.contentData)
                // return
                this.studentsAll = false;
                this.courseContentShow = 'creatCourseTwo';
                this.currentTeamEmptyArr = []
            },
            // 获取职位
            getAllPosition(){
                this.$http.getPosition(null,(res)=>{
                    this.getPositionAll = res.data;
                    console.log("groupData为:" + this.getPositionAll)
                  
                    console.log(res)
                },(errRes)=>{
                    console.log(errRes)
                })
            },
            // 手动创建确认后近回课程列表
            confirmDia(){
                this.$router.push({name:'curriculum-schedule'})
            }

            
        },
        
        // 载入
        mounted(){
            // 滚动监听事件
            window.addEventListener('scroll',this.handleScroll);
            // 获取所有职位
            this.getAllPosition();
            
        },
        // 销毁
        destroyed () {
            window.removeEventListener('scroll', this.handleScroll)
        },
    }
</script>

